<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>2022月度汇缴金额统计</title>

    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" >

        <div th:replace="common :: headermenu"></div>

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                月度汇缴金额统计
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Charts</a>
                </li>
                <li class="active"> Chartjs </li>
            </ul>
        </div>
        <!-- page heading end-->

        <div class="wrapper" style="height: 11px;">
            <span>当前月份：</span>
            <select id="selectMonth" onchange="changeData()">
                <option value="1" th:selected="${month.month==1}">一月</option>
                <option value="2" th:selected="${month.month==2}">二月</option>
                <option value="3" th:selected="${month.month==3}">三月</option>
                <option value="4" th:selected="${month.month==4}">四月</option>
                <option value="5" th:selected="${month.month==5}">五月</option>
                <option value="6" th:selected="${month.month==6}">六月</option>
                <option value="7" th:selected="${month.month==7}">七月</option>
                <option value="8" th:selected="${month.month==8}">八月</option>
                <option value="9" th:selected="${month.month==9}">九月</option>
                <option value="10" th:selected="${month.month==10}">十月</option>
                <option value="11" th:selected="${month.month==11}">十一月</option>
                <option value="12" th:selected="${month.month==12}">十二月</option>
                <option value="13" th:selected="${month.month==13}">全年</option>
            </select>

            <span style="padding-left: 10px">当前统计：</span>
            <select id="selectMethod" onchange="changeData()">
                <option value="money" th:selected="${method=='money'}">金额</option>
                <option value="company" th:selected="${method=='company'}">公司数</option>
                <option value="people" th:selected="${method=='people'}">职工数</option>
            </select>
        </div>

        <!--body wrapper start-->
        <div class="wrapper" >
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header id="text1" class="panel-heading">
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="main1" style="width: 100%;height: 400px"></div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <header id="text5" class="panel-heading">
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="main5" style="width: 520px;height:350px;"></div>
                        </div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header id="text2" class="panel-heading">
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="main2" style="width: 520px;height:350px;"></div>
                        </div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header id="text3" class="panel-heading">
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="main3" style="width: 520px;height:350px;"></div>
                        </div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header id="text4" class="panel-heading">
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="main4" style="width: 520px;height:350px;"></div>
                        </div>
                    </section>
                </div>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2022 &copy; 上海承大 年度数据可视化 </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<script type="text/javascript" th:inline="javascript">
    //通过用户的选择来进行页面的跳转
    function changeData(){
        var selectMonth =  document.getElementById('selectMonth');
        var selectMethod = document.getElementById('selectMethod');
        var month = selectMonth.options[selectMonth.selectedIndex].value;
        var method = selectMethod.options[selectMethod.selectedIndex].value;
        window.location.href = '/everymonth_chart?'+'month='+month+'&&'+'method='+method;
    }
    //处理数据
    let monthVo  = [[${month}]];
    var method = [[${method}]];
    var unit;//图表的单位
    var dataChar = new Array(6);
    var dataChar2 = new Array(3);
    if (method=='money'){
        document.getElementById("text1").innerHTML='本月各渠道汇缴金额';
        document.getElementById("text2").innerHTML='本月网上渠道汇缴金额';
        document.getElementById("text3").innerHTML='本月柜面渠道汇缴金额';
        document.getElementById("text4").innerHTML='本月自动渠道汇缴金额';
        document.getElementById("text5").innerHTML='本月网站详情';
        dataChar[0]=(monthVo.onlineChannelVo.retentionPayment/100000000);
        dataChar[1]=(monthVo.onlineChannelVo.onlineBanking/100000000);
        dataChar[2]=(monthVo.cabinetSideChannelVo.bankAccounting/100000000);
        dataChar[3]=(monthVo.cabinetSideChannelVo.check/100000000);
        dataChar[4]=(monthVo.autoChannelVo.consignmentCollection/100000000);
        dataChar[5]=(monthVo.cabinetSideChannelVo.creditVoucher/100000000);
        dataChar2[0]=(monthVo.onlineChannelVo.retentionpaymentVo.client/100000000);
        dataChar2[1]=(monthVo.onlineChannelVo.retentionpaymentVo.company/100000000);
        dataChar2[2]=(monthVo.onlineChannelVo.retentionpaymentVo.webpage/100000000);
        unit='亿元';
    }else if (method=='company'){
        document.getElementById("text1").innerHTML='本月各渠道汇缴公司数';
        document.getElementById("text2").innerHTML='本月网上渠道汇缴公司数';
        document.getElementById("text3").innerHTML='本月柜面渠道汇缴公司数';
        document.getElementById("text4").innerHTML='本月自动渠道汇缴公司数';
        document.getElementById("text5").innerHTML='本月网站详情';
        dataChar[0]=(monthVo.onlineChannelVo.retentionPaymentUnit/10000);
        dataChar[1]=(monthVo.onlineChannelVo.onlineBankingUnit/10000);
        dataChar[2]=(monthVo.cabinetSideChannelVo.bankAccountingUnit/10000);
        dataChar[3]=(monthVo.cabinetSideChannelVo.checkUnit/10000);
        dataChar[4]=(monthVo.autoChannelVo.consignmentCollectionUnit/10000);
        dataChar[5]=(monthVo.cabinetSideChannelVo.creditVoucherUnit/10000);
        dataChar2[0]=(monthVo.onlineChannelVo.retentionpaymentVo.clientUnit/10000);
        dataChar2[1]=(monthVo.onlineChannelVo.retentionpaymentVo.companyUnit/10000);
        dataChar2[2]=(monthVo.onlineChannelVo.retentionpaymentVo.webpageUnit/10000);
        unit='万家';
    }else{
        document.getElementById("text1").innerHTML='本月各渠道汇缴职工数';
        document.getElementById("text2").innerHTML='本月网上渠道汇缴职工数';
        document.getElementById("text3").innerHTML='本月柜面渠道汇缴职工数';
        document.getElementById("text4").innerHTML='本月自动渠道汇缴职工数';
        document.getElementById("text5").innerHTML='本月网站详情';
        dataChar[0]=(monthVo.onlineChannelVo.retentionPaymentPeople/10000);
        dataChar[1]=(monthVo.onlineChannelVo.onlineBankingPeople/10000);
        dataChar[2]=(monthVo.cabinetSideChannelVo.bankAccountingPeople/10000);
        dataChar[3]=(monthVo.cabinetSideChannelVo.checkPeople/10000);
        dataChar[4]=(monthVo.autoChannelVo.consignmentCollectionPeople/10000);
        dataChar[5]=(monthVo.cabinetSideChannelVo.creditVoucherPeople/10000);
        dataChar2[0]=(monthVo.onlineChannelVo.retentionpaymentVo.clientPeople/10000);
        dataChar2[1]=(monthVo.onlineChannelVo.retentionpaymentVo.companyPeople/10000);
        dataChar2[2]=(monthVo.onlineChannelVo.retentionpaymentVo.webpagePeople/10000);
        unit='万人';
    }
    totalSum = sum(dataChar);
    totalSum2 = sum(dataChar2);

    //通过echarts展示数据图表
    //各个渠道图
    var myChart = echarts.init(document.getElementById('main1'));
    option = {
        xAxis: {
            type: 'category',
            data: ['网站', '建行网银', '银行卡转账', '支票', '委托收款', '贷记凭证']
        },
        yAxis: {
            name: unit,
            type: 'value'
        },
        series: [
            {
                data: [
                    dataChar[0],dataChar[1],dataChar[2],dataChar[3],dataChar[4],dataChar[5]
                ],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
    myChart.setOption(option);


    //网上渠道图
    var myChart1 = echarts.init(document.getElementById('main2'));
    option1 = {
        backgroundColor: '#fff',
        legend: { show: false },
        series: [
            {
                name: '网上渠道占比分析',
                type: 'pie',
                radius: ['0%', '60%'],
                avoidLabelOverlap: true,
                itemStyle: { borderColor: '#fff', borderWidth: 2 },
                color: [
                    '#80d6f9',
                    '#f7c025',
                ],
                label: {
                    // alignTo: 'labelLine', // ! 文字对齐方式
                    formatter: function (e) {
                        let {
                            data: { value, name, percent },
                        } = e;
                        if(name=='委托扣款'){
                            return `{x|}{d|${name}}\n{bb|${value+unit}}{cc|${percent}}`;

                        }else{
                            return `{x|}{a|${name}}\n{b|${value+unit}}{c|${percent}}`;
                        }
                    },
                    minMargin: 5,
                    lineHeight: 15,
                    rich: {
                        x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5},
                        a: { fontSize: 16, color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600 },
                        b: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        c: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                        d: { fontSize: 16,  color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600 },
                        bb: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        cc: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                    },
                },
                data: [
                    { value: (dataChar[0]/1).toFixed(2), name: '网站', percent: ((dataChar[0]/totalSum)*100).toFixed(2)+'%' },
                    { value: (dataChar[1]/1).toFixed(2), name: '建行网银', percent: ((dataChar[1]/totalSum)*100).toFixed(2)+'%' },
                ],
            },
        ],
    };
    myChart1.setOption(option1);

    //柜面渠道图
    var myChart2 = echarts.init(document.getElementById('main3'));
    option2 = {
        backgroundColor: '#fff',
        legend: { show: false },
        series: [
            {
                name: '柜面渠道占比分析',
                type: 'pie',
                radius: ['0%', '60%'],
                avoidLabelOverlap: true,
                itemStyle: { borderColor: '#fff', borderWidth: 2 },
                color: [
                    '#80d6f9',
                    '#f7c025',
                    '#BA55D3'
                ],
                label: {
                    // alignTo: 'labelLine', // ! 文字对齐方式
                    formatter: function (e) {
                        let {
                            data: { value, name, percent },
                        } = e;
                        if(name=='银行卡转账'){
                            return `{x|}{d|${name}}\n{bb|${value+unit}}\n\t\t\t{cc|${percent}}`;
                        }else if(name=='支票'){
                            return `{x|}{a|${name}}\n{b|${value+unit}}\n\t{c|${percent}}`;
                        }else{
                            return `{x|}{d|${name}}\n{bb|${value+unit}}\n\t{cc|${percent}}`;
                        }
                    },
                    minMargin: 5,
                    lineHeight: 15,
                    rich: {
                        x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5},
                        a: { fontSize: 16, color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600 },
                        b: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        c: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                        d: { fontSize: 16,  color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600},
                        bb: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        cc: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                    },
                },
                data: [
                    { value: (dataChar[2]/1).toFixed(2), name: '银行卡转账', percent: ((dataChar[2]/totalSum)*100).toFixed(2)+'%' },
                    { value: (dataChar[3]/1).toFixed(2), name: '支票', percent: ((dataChar[3]/totalSum)*100).toFixed(2)+'%'  },
                    { value: (dataChar[5]/1).toFixed(2), name: '贷记凭证', percent: ((dataChar[5]/totalSum)*100).toFixed(2)+'%'  }
                ],
            },
        ],
    };
    myChart2.setOption(option2);

    //自动渠道图
    var myChart3 = echarts.init(document.getElementById('main4'));
    option3 = {
        backgroundColor: '#fff',
        legend: { show: false },
        series: [
            {
                name: '自动渠道占比分析',
                type: 'pie',
                radius: ['0%', '60%'],
                avoidLabelOverlap: true,
                itemStyle: { borderColor: '#fff', borderWidth: 2 },
                color: [
                    '#80d6f9'
                ],
                label: {
                    // alignTo: 'labelLine', // ! 文字对齐方式
                    formatter: function (e) {
                        let {
                            data: { value, name, percent },
                        } = e;
                        if(name=='委托收款'){
                            return `{x|}{d|${name}}\n{bb|${value+unit}}{cc|${percent}}`;
                        }
                    },
                    minMargin: 5,
                    lineHeight: 15,
                    rich: {
                        x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5},
                        a: { fontSize: 16, color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600 },
                        b: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        c: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                        d: { fontSize: 16,  color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600 },
                        bb: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        cc: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                    },
                },
                data: [
                    { value: (dataChar[4]/1).toFixed(2), name: '委托收款', percent: '100%' }
                ],
            },
        ],
    };
    myChart3.setOption(option3);

    //委托扣款详情图
    var myChart4 = echarts.init(document.getElementById('main5'));
    option4 = {
        backgroundColor: '#fff',
        legend: { show: false },
        series: [
            {
                name: '柜面渠道占比分析',
                type: 'pie',
                radius: ['0%', '60%'],
                avoidLabelOverlap: true,
                itemStyle: { borderColor: '#fff', borderWidth: 2 },
                color: [
                    '#80d6f9',
                    '#f7c025',
                    '#BA55D3'
                ],
                label: {
                    // alignTo: 'labelLine', // ! 文字对齐方式
                    formatter: function (e) {
                        let {
                            data: { value, name, percent },
                        } = e;
                        if(name=='客户端'){
                            return `{x|}{d|${name}}\n{bb|${value+unit}}\n\t\t\t{cc|${percent}}`;
                        }else if(name=='人力资源公司'){
                            return `{x|}{a|${name}}\n{b|${value+unit}}\n\t{c|${percent}}`;
                        }else{
                            return `{x|}{d|${name}}\n{bb|${value+unit}}\n\t{cc|${percent}}`;
                        }
                    },
                    minMargin: 5,
                    lineHeight: 15,
                    rich: {
                        x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5},
                        a: { fontSize: 16, color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600 },
                        b: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        c: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                        d: { fontSize: 16,  color: 'inherit', padding: [0, 20, 0, 8],fontWeight:600},
                        bb: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 18],fontWeight:600 },
                        cc: { fontSize: 14, align: 'left', color: '#666666', padding: [18, 0, 0, 8],fontWeight:600 },
                    },
                },
                data: [
                    { value: (dataChar2[0]/1).toFixed(2), name: '客户端', percent: ((dataChar2[0]/totalSum)*100).toFixed(2)+'%' },
                    { value: (dataChar2[1]/1).toFixed(2), name: '人力资源公司', percent: ((dataChar2[1]/totalSum)*100).toFixed(2)+'%' },
                    { value: (dataChar2[2]/1).toFixed(2), name: '网页版', percent: ((dataChar2[2]/totalSum)*100).toFixed(2)+'%' }
                ],
            },
        ],
    };
    myChart4.setOption(option4);

    function sum(arr) {
        var s = 0;
        arr.forEach(function(val, idx, arr) {
            s += val;
        }, 0);

        return s;
    };
</script>

<div th:replace="common :: #commonscript"></div>
</body>

</html>
